<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
			width:100px;
			height:100px;
			border-radius: 50%;
			background: red;
			margin:100px auto;
			padding: 40px;
			}
			#d2{
			width:20px;
			height:20px;
			background: yellow;
			margin:0px auto;
			margin-top: 40px;
			
			}
		</style>
	</head>
	<body>
		
		<div id="d1">
			<div id="d2"></div>
		</div>
		<script>
			var d1 = document.getElementById('d1');
			var d2 = document.getElementById('d2');
			var i=0;
			d1.addEventListener('mouseover',function(){
				var t=setInterval(function(){
//					clearInterval(t);
						i++;
						var len=d1.offsetWidth/2;
						var lenY=Math.sin(Math.PI/180*i)*len;
						var lenX=Math.cos(Math.PI/180*i)*len;
						
						d2.style.transform="translate("+lenX+"px,"+lenY+"px)";
						d1.style.transform="transform-origin"+":"+"150% 150%";
					},20)
			},false)
			
			</script>
		
	</body>
</html>
